<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/carts.css">
    <link rel="stylesheet" href="./css/base.css">
</head>

<body>
    <div class="all1">
        <div class="shop-1 main">
            <div class="shopping-left fl">
                <span class="shopping-left1">15111018430</span>
                <span class="shopping-left2">欢迎您回来!</span>
                <span>退出</span>
            </div>
            <ul class="shopping-right fr">
                <li>我的订单</li>
                <li>个人中心</li>
                <li><img src="./images/images/s-1.jpg" alt="" class="fl">在线客服</li>
                <li><span>客服热线:</span><span class="right-txt">400-6699-840</span></li>
            </ul>
        </div>
    </div>
    <div class="all2">
        <div class="shop-2 main">
            <div class="fl"><img src="https://www.huitouyu.hk/themes/pc_paleng_moban/images/logo.png" alt=""></div>
            <div class="fr"><img src="./images/shopping.jpg" alt=""></div>
        </div>
    </div>
    <div class="all3 main">
        <ul class="shop-3 main">
            <li><input type="checkbox">全选</li>
            <li>商品</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
    </div>
    <!-- <tbody id="tab">
        
    </tbody> -->
    </table>
    <div class="all4">
        <div class="shop-4 main">
            <input type="checkbox" class="fl" checked>
            <p class="shop-4-txt fl">回头鱼全球购</p>
        </div>
    </div>
    <div class="all5">
        <div class="shop-5 main">
            <div class="shop-5-1">
                <input type="checkbox" class="fl shop-box1">
                <p class="fl sp-1">
                    <img src="https://images.huitouyu.com/images/201911/thumb_img/17318_thumb_G_1573594912797.jpg"
                        alt="" class="fl">
                    <span class="fl">美国kiehls科颜氏防晒隔离乳(橙色)60ml</span>
                </p>
                <span class="fl shop5-txt1">￥246.05</span>
                <p class="fl sp-2"><button class="sp-txt1">-</button><button class="sp-txt sp-txt2">1</button><button
                        class="sp-txt3">+</button></p>
                <span class="fl shop5-txt2">￥246.05</span>
                <p class="fr fs14 shop5-txt3">删除</p>
            </div>
            <div class="shop-5-1">
                <input type="checkbox" class="fl shop-box1">
                <p class="fl sp-1">
                    <img src="https://images.huitouyu.com/images/201911/thumb_img/17318_thumb_G_1573594912797.jpg"
                        alt="" class="fl">
                    <span class="fl">美国kiehls科颜氏防晒隔离乳(橙色)60ml</span>
                </p>
                <span class="fl shop5-txt1">￥246.05</span>
                <p class="fl sp-2"><button class="sp-txt1">-</button><button class="sp-txt sp-txt2">1</button><button
                        class="sp-txt3">+</button></p>
                <span class="fl shop5-txt2">￥246.05</span>
                <p class="fr fs14 shop5-txt3">删除</p>
            </div>
        </div>
    </div>
    <div class="all6">
        <div class="shop-6 main">
            <p class="s6-1">继续购物</p>
            <span class="qk">清空购物车</span>
            <span class="s6-3">总计(不含折扣):</span>
            <span class="s6-4">493</span>
            <p class="s6-2">去结算</p>
        </div>
    </div>
    <div class="all7">
        <div class="shop-7 main">
            <div class="shop-7-top">
                <div class="s7-top-title fl">
                    今日最受欢迎
                </div>
            </div>
            <div class="shop-7-bottom">
                <ul class="s7-bottom">
                    <li>
                        <p>
                            <img src="https://images.huitouyu.com/images/201910/thumb_img/28251_thumb_G_1571771797516.jpg"
                                alt="">
                        </p>
                        <p class="s7-txt">
                            <a href="">日本Curel珂润物理保湿防晒霜(SPF...)</a>
                        </p>
                        <p class="s7-txt1">
                            <a href="">109.00</a>
                        </p>
                        <a href=""><img src="./images/gwc.jpg" alt="" class="gwc"></a>
                    </li>
                    <li>
                        <p>
                            <img src="https://images.huitouyu.com/images/201910/thumb_img/28251_thumb_G_1571771797516.jpg"
                                alt="">
                        </p>
                        <p class="s7-txt">
                            <a href="">日本Curel珂润物理保湿防晒霜(SPF...)</a>
                        </p>
                        <p class="s7-txt1">
                            <a href="">109.00</a>
                        </p>
                        <a href=""><img src="./images/gwc.jpg" alt="" class="gwc"></a>
                    </li>
                    <li>
                        <p>
                            <img src="https://images.huitouyu.com/images/201910/thumb_img/28251_thumb_G_1571771797516.jpg"
                                alt="">
                        </p>
                        <p class="s7-txt">
                            <a href="">日本Curel珂润物理保湿防晒霜(SPF...)</a>
                        </p>
                        <p class="s7-txt1">
                            <a href="">109.00</a>
                        </p>
                        <a href=""><img src="./images/gwc.jpg" alt="" class="gwc"></a>
                    </li>
                    <li>
                        <p>
                            <img src="https://images.huitouyu.com/images/201910/thumb_img/28251_thumb_G_1571771797516.jpg"
                                alt="">
                        </p>
                        <p class="s7-txt">
                            <a href="">日本Curel珂润物理保湿防晒霜(SPF...)</a>
                        </p>
                        <p class="s7-txt1">
                            <a href="">109.00</a>
                        </p>
                        <a href=""><img src="./images/gwc.jpg" alt="" class="gwc"></a>
                    </li>
                    <li>
                        <p>
                            <img src="https://images.huitouyu.com/images/201910/thumb_img/28251_thumb_G_1571771797516.jpg"
                                alt="">
                        </p>
                        <p class="s7-txt">
                            <a href="">日本Curel珂润物理保湿防晒霜(SPF...)</a>
                        </p>
                        <p class="s7-txt1">
                            <a href="">109.00</a>
                        </p>
                        <a href=""><img src="./images/gwc.jpg" alt="" class="gwc"></a>
                    </li>
                    <li>
                        <p>
                            <img src="https://images.huitouyu.com/images/201910/thumb_img/28251_thumb_G_1571771797516.jpg"
                                alt="">
                        </p>
                        <p class="s7-txt">
                            <a href="">日本Curel珂润物理保湿防晒霜(SPF...)</a>
                        </p>
                        <p class="s7-txt1">
                            <a href="">109.00</a>
                        </p>
                        <a href=""><img src="./images/gwc.jpg" alt="" class="gwc"></a>
                    </li>
                    <li>
                        <p>
                            <img src="https://images.huitouyu.com/images/201910/thumb_img/28251_thumb_G_1571771797516.jpg"
                                alt="">
                        </p>
                        <p class="s7-txt">
                            <a href="">日本Curel珂润物理保湿防晒霜(SPF...)</a>
                        </p>
                        <p class="s7-txt1">
                            <a href="">109.00</a>
                        </p>
                        <a href=""><img src="./images/gwc.jpg" alt="" class="gwc"></a>
                    </li>
                    <li>
                        <p>
                            <img src="https://images.huitouyu.com/images/201910/thumb_img/28251_thumb_G_1571771797516.jpg"
                                alt="">
                        </p>
                        <p class="s7-txt">
                            <a href="">日本Curel珂润物理保湿防晒霜(SPF...)</a>
                        </p>
                        <p class="s7-txt1">
                            <a href="">109.00</a>
                        </p>
                        <a href=""><img src="./images/gwc.jpg" alt="" class="gwc"></a>
                    </li>
                    <li>
                        <p>
                            <img src="https://images.huitouyu.com/images/201910/thumb_img/28251_thumb_G_1571771797516.jpg"
                                alt="">
                        </p>
                        <p class="s7-txt">
                            <a href="">日本Curel珂润物理保湿防晒霜(SPF...)</a>
                        </p>
                        <p class="s7-txt1">
                            <a href="">109.00</a>
                        </p>
                        <a href=""><img src="./images/gwc.jpg" alt="" class="gwc"></a>
                    </li>
                    <li>
                        <p>
                            <img src="https://images.huitouyu.com/images/201910/thumb_img/28251_thumb_G_1571771797516.jpg"
                                alt="">
                        </p>
                        <p class="s7-txt">
                            <a href="">日本Curel珂润物理保湿防晒霜(SPF...)</a>
                        </p>
                        <p class="s7-txt1">
                            <a href="">109.00</a>
                        </p>
                        <a href=""><img src="./images/gwc.jpg" alt="" class="gwc"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="all8">
        <div class="shop-8 main">
            <span>Copyright@2012-2021 Huitouyu.hk 版权所有</span>
        </div>
    </div>
</body>

</html>
<script src="./js/jquery.js"></script>
<script src="./js/carts.js"></script>



<script>


    $(function () {
        $.ajax({
            url: "/api/cartList",
            data: { uId: JSON.parse(localStorage.getItem("userInfo")).uId }

        }).done(function (res) {
            let { data } = res;
            console.log(res);
            let strHtml = '';
            data.forEach(el => {
                strHtml += `
                    <div class="shop-5-1" cid=${el.cId}>
                        <input type="checkbox" class="fl shop-box1">
                        <p class="fl sp-1">
                            <img src="https://images.huitouyu.com/images/201911/thumb_img/17318_thumb_G_1573594912797.jpg" alt="" class="fl">
                            <span class="fl">美国kiehls科颜氏防晒隔离乳(橙色)60ml</span> 
                        </p>
                        <span class="fl shop5-txt1">￥246.05</span> 
                        <p class="fl sp-2"><button class="sp-txt1">-</button><button class="sp-txt sp-txt2">1</button><button class="sp-txt3">+</button></p>
                        <span class="fl shop5-txt2">￥246.05</span> 
                        <p class="fr fs14 shop5-txt3">删除</p>
                    </div> `
                // strHtml += `
                // <tr>
                //     <td>
                //         <input type="checkbox">
                //     </td>
                //     <td>
                //         <img src=${el.cImg}>${el.pname}
                //     </td>
                //     <td>
                //         ${el.pprice}
                //     </td>
                //     <td>
                //         <button>-</button><button>${el.pNumber}</button><button>+</button>
                //     </td>
                //     <td>
                //         ${el.pTotal}
                //     </td>
                //     <td>
                //         <a class="del" cid=${el.cId}>删除</a>
                //     </td>
                // </tr>
                // `
            })

            $(".shop-5").html(strHtml);

        })
    })

    // $(function () {


    //     $("#tab").on("click",".del",function () {
    //         let cid = $(this).attr("cid")

    //         $.ajax({
    //             url:"/api/delete",
    //             type:"post",
    //             data:{ cid }
    //         }).then(function () {
    //             layer.msg(res.message)
    //             $(this).parents("tr").remove()
    //         })



    //     })
    //     $("#tab").on("click",".sub",function () {
    //         let num = $(this).next().val()
    //         if (num <= 1) {
    //             return
    //         }
    //         $(this).next().val(--num)




    //         let cid = $(this).parents("tr").chidren("td").last().chidren().attr("cid")
    //         $.ajax({
    //             url:"/api/modify",
    //             type:"post",
    //             data:{
    //                 pnum:num,
    //                 cid
    //             }
    //         }).then(function (res) {
    //              layer.msg(res.message);    
    //         })



    //     })
    //     $("#tab").on("click",".sup",function () {
    //         let num = $(this).prev().val()
    //         if (num <= 1) {
    //             return
    //         }
    //     })
    //     $(this).prev().val(++num)


    //      //修改总额
    //      let price =  $(this).parents("tr").chidren("td").eq(2).text()
    //      $(this).parents("tr").chidren("td").eq(4).text(num * price)


    //     let cid = $(this).parents("tr").chidren("td").last().chidren().attr("cid")
    //         $.ajax({
    //             url:"/api/modify",
    //             type:"post",
    //             data:{
    //                 pnum:num,
    //                 cid
    //             }
    //         }).then(function (res) {
    //              layer.msg(res.message);    
    //         })

    // })
</script>